<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>

    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/font.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/xadmin.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/lib/layui/css/layui.css')}}">

    <script type="text/javascript" src="{{URL::asset('resources/xadmin/lib/layui/layui.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/xadmin.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/echarts.min.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/dark.js')}}"></script>

    <style>
        /* body{ margin:0; height:100%} */
        /* html{ height:100%} 兼容firefox的div高度100% */
        /* #temp_chart{ position:absolute; top:70px; left:20px; width:800px; height:500px;}
        #yb_chart{ left:820px; top:0px;height:100%;width:800px; height:500px;} */
        #temp_chart {
            position: absolute;
            top: 20px;
            left: -1%;
            width: 55%;
            height: 500px;
        }

        #yb_chart {
            position: absolute;
            top: 20px;
            left: 56%;
            width: 45%;
            height: 500px;
        }

        /* .one{width:80%; font-size:em(设置自体的大小，em可以让自体根据浏览器不同而更加优与阅读）;}
        .two{width:20%;font-size:em;} */

    </style>
</head>
<body>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
                <cite>导航元素</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">


                    <form class="layui-form layui-col-space5" name='form' id='form'>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="start" id="start" lay-verify="start" placeholder="yyyy-MM-dd"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">截止日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="end" id="end" lay-verify="end" placeholder="yyyy-MM-dd"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" id="btnSubmit" lay-submit="" lay-filter="search"><i
                                        class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                    <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
                    <div class="layui-fluid">
                        {{--第一个是柱状图和仪表图，第二个是仪表图--}}
                        <div class="layui-inline layui-show" id="temp_chart"></div>
                        <div class="layui-inline layui-show" id="yb_chart"></div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script>
    layui.use(['form', 'jquery', 'element', 'laydate'], function () {

        //初始化操作@@@@@@@@@@@@@@@@
        var $ = layui.jquery
        element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form
            , layer = layui.layer;
        laydate = layui.laydate
        laydate.render({
            elem: '#start'
        }); //刷新时间选择
        laydate.render({
            elem: '#end'
        });

        $("#btnSubmit").click(function () {
            $("#form").attr("target", "rfFrame");
        });
        //初始化操作@@@@@@@@@@@@@@@@


        //这是echarts表格
        var myChart = echarts.init(document.getElementById('temp_chart'), 'dark');
        // var myChart = echarts.init(document.getElementById('humi_chart'),'dark');
        var ybchart = echarts.init(document.getElementById('yb_chart'), 'dark');


        // 指定图表的配置项和数据
        ybchart.setOption({
            //所有的配置项去这里查找
            //https://echarts.apache.org/zh/option.html#toolbox.feature.dataZoom
            tooltip: {
                // formatter: "{a} <br/>{b} : {c}%"
                formatter: "{a} <br/>{b} : {c}"
            },

            //这里是图标右上方的工具栏@@@@@@@@@@@@@@@@@@@
            toolbox: {
                //是否展示
                show: true
                //各工具配置项。
                , feature: {
                    //数据区域缩放。目前只支持直角坐标系的缩放。
                    dataZoom: {
                        yAxisIndex: 'none'
                    }
                    , dataView: {
                        readOnly: false
                    },
                    restore: {}
                    , saveAsImage: {}
                }
            }
            //这里是图标右上方的工具栏@@@@@@@@@@@@@@@@@@@
            , series: [
                {
                    name: '当前温度'
                    , type: 'gauge',
                    // center: ['75%', '50%'],    // 默认全局居中
                    radius: '85%'
                    , startAngle: 150
                    , min: 10
                    , max: 60
                    , endAngle: 30
                    , axisTick: { // 坐标轴小标记
                        show: true
                    }
                    , axisLabel: {
                        formatter: function (v) {
                            switch (v + '') {
                                case '32.5':
                                    return ' ';
                                case '35':
                                    return '当前温度';
                                case '37.5':
                                    return ' ';
                                default:
                                    return v;
                            }
                        }
                    }
                    , splitNumber: 20
                    , title: {
                        show: false
                    }
                    , detail: {
                        show: true
                        , offsetCenter: [0, '-40%']
                        , borderColor: 'transparent'
                        , formatter: function (v) {
                            return v + "℃"
                        }

                    }
                    , data: []
                }
                , {
                    name: '当前湿度'
                    , type: 'gauge',
                    // center: ['75%', '50%'],    // 默认全局居中
                    detail: {
                        formatter: '{v}%'
                    }, //仪表盘显示数据
                    radius: '85%'
                    , min: 20
                    , max: 100
                    , axisTick: { // 坐标轴小标记
                        show: true
                    }
                    , axisLabel: {
                        formatter: function (v) {
                            switch (v + '') {
                                case '56':
                                    return ' ';
                                case '60':
                                    return '当前湿度';
                                case '64':
                                    return ' ';
                                default:
                                    return v;
                            }
                        }
                    }
                    , startAngle: 330
                    , endAngle: 210
                    , splitNumber: 20
                    , title: {
                        show: false
                    }
                    , detail: {
                        show: true
                        , formatter: function (v) {
                            return v + "%RH"
                        }
                    }
                    , data: []
                },
            ]
        });


        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '室内温度湿度监测'
            }
            , tooltip: {
                trigger: 'axis'
                , axisPointer: {
                    type: 'cross'
                    , label: {
                        backgroundColor: '#6a7985'
                    }
                }
            }
            , legend: {
                data: ['空气湿度', '空气温度']
            }
            , toolbox: {
                show: true
                , feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }
                    , dataView: {
                        readOnly: false
                    }
                    , magicType: {
                        type: ['line', 'bar']
                    }
                    , restore: {}
                    , saveAsImage: {}
                }
            }
            , grid: {
                left: '3%'
                , right: '4%'
                , bottom: '3%'
                , containLabel: true
            }
            , xAxis: [{
                type: 'category'
                , boundaryGap: false
                , data: [],
                // "axisLabel":{
                //     interval: 0
                // }
                "axisLabel": {
                    interval: 10
                    , rotate: 40
                    ,
                }
                // axisLabel: {interval:0,}
            }]
            , yAxis: [{
                type: 'value'
                , name: '湿度%RH'
                , axisLabel: {
                    show: true
                    , interval: 'auto'
                    , formatter: '{value} %'
                }
                , show: true
                , max: 100
            }
                , {
                    type: 'value'
                    , name: '温度 ℃'
                    , axisLabel: {
                        show: true
                        , interval: 'auto',
                        //  formatter: '{value} %'
                    }
                    , show: true
                    , max: 50
                }

            ]
            , series: [{
                name: '空气湿度'
                , type: 'line',
                //stack: '总量',
                areaStyle: {}
                , barGap: '-100%'
                , data: []
            }
                , {
                    name: '空气温度'
                    , type: 'bar'
                    , areaStyle: {}
                    , barGap: '-100%'
                    , yAxisIndex: 1
                    , data: []
                }

            ]
        });
        ybchart.showLoading();
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画


        //
        var presetn_info = setInterval(yb_char_update, 1000);

        function yb_char_update() {
            $.ajax({
                // 请求方式
                type: "post"
                // 请求地址
                , url: "{{URL::action('Admin\InfoController@present_get_TA')}}"
                // 异步请求
                , async: true
                // CSRF跨域请求伪造
                , data: {
                    _token: "{{csrf_token()}}"
                }
                // 数据类型json
                , dataType: 'json'

                // 成功的回调函数
                , success: function (res) {

                    ybchart.setOption({ //加载数据图表
                        series: [ // 根据名字对应到相应的系列
                            //name: '当前温度',
                            {
                                data: [{
                                    value: res.temp
                                    , name: '当前温度'
                                }]
                            }
                            , {
                                data: [{
                                    value: res.air_hum
                                    , name: '当前湿度'
                                }]
                            }

                        ]
                    });
                    ybchart.hideLoading();
                }

                , error: function (errorMsg) {
                        layer.alert("数据请求失败" + "<br />" +
                            "请检查设备连接" + "<br />" + "然后刷新页面!");

                    clearInterval(presetn_info);

                    //配置一下动画
                    ybchart.showLoading({
                        text: '您的设备未工作',
                        //字体颜色
                        textColor: '#c20f20',
                        fontSize: 100,
                        showSpinner: true,
                        lineWidth: 5
                    });
                    console.log(errorMsg);
                }
            })

        }


        //正常情况下应该10分钟请求一次数据，这里做测试2秒
        //setInterval(fun, 2000);
        fun();

        function fun() {
            $.ajax({
                type: "post"
                , url: "{{URL::action('Admin\InfoController@house')}}"
                , async: true
                , data: {
                    _token: "{{csrf_token()}}"
                },
                //这里发送请求的时候可以再追加参数，以限制数据的多少
                // data:{_token:"{{csrf_token()}}",timeee:'222'},
                dataType: 'json'
                , success: function (res) {

                    insert_echarts(res)


                }
                , error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");

                    myChart.hideLoading();

                    //console.log(errorMsg);
                }

            });
        };
        //监听提交
        //发异步，把数据提交给php
        form.on('submit(search)', function (data) {
            console.log(data);
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //layer.alert(JSON.stringify(data.field))
            $.ajax({
                //请求的地址
                url: "{{URL::action('Admin\InfoController@house')}}"
                //是否异步：是
                , async: true
                //HTTP请求方式 POST
                , type: "POST"
                //数据类型json
                , dataType: "json"
                , headers: {
                    'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')
                }
                //发送过去的数据  start,  end
                , data: data.field

                , success: function (res) {
                    // layer.alert("接受成功")
                    //show_echarts(res)
                    // 后端返回的数据保存在 res变量中，用insert_echarts()更新到echarts
                    insert_echarts(res)
                }
                , error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();

                    //console.log(errorMsg);
                }


            })
        })

        function insert_echarts(res) {
            if (res) {

                // @@@@@@@@@@@@@@@@@@@@@@@@@@@    json格式不能直接插到echarts ，在这里进行数据的转换
                console.log(res)
                var times = [];
                var air = [];
                var temp = [];

                for (let i in res.times) { //用这个函数将res对象转换成array数组
                    times.push(res.times[i]); //属性
                    air.push(res.air[i]);
                    temp.push(res.temp[i]);
                }

                console.log(res.times);
                console.log(res.air);
                console.log(res.soil);

                // @@@@@@@@@@@@@@@@@@@@@@@@@@@
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    xAxis: [{
                        data: times
                        ,
                    }],
                    series: [ // 根据名字对应到相应的系列
                        {
                            name: '空气湿度'
                            , data: air
                        }
                        , {
                            name: '空气温度'
                            , data: temp

                        }
                    ]
                });
            }
        }


    });

</script>

</html>
